<!DOCTYPE html>
<html class="" lang="en">
<head>
	<title>购物车</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">	
		<link rel="stylesheet" type="text/css" href="/css/all.min.css">				
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="/img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css">
		<link rel="stylesheet" type="text/css" href="/css/media.css">
		<link rel="stylesheet" type="text/css" href="/css/responsive.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
  		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css">
		<link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
	 	<link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>

<th:block th:include="header"/>
	<div id="cart_page" class="cart-page animate__animated animate__fadeInUp">


		<div class="sp_header bg-white p-3 ">
			<div class="container custom_container ">
				<div class="row ">
					<div class="col-12 ">
						<ul>
							<li class="d-inline-block font-weight-bolder"><a href="index.html">首页</a></li>
							<li class="d-inline-block hr_ font-weight-bolder"><a href="#">购物车</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="container custom_container ">
			<div class="row">
				<div class="col-12 col-lg-8">
					<div class="card">

						<div class="card-header cart_header bg-white">
							<div class="card-title mb-0">
								<div class="row">
									<div class="col-12">
										<h5 class="mb-0"><i class="fas fa-shopping-cart"></i>&nbsp;&nbsp;购物车</h5>
									</div>
								</div>
							</div>
						</div>


						<!--就这-->
						<div id="models" class="card-body cart_body">

						</div>

						<div class="card-footer">
							<div class="row">
								<div class="col-6 col-sm-7 text-right">
									<div class="my-2 font-weight-bold">
										<span>总计:</span>
										<span id="sumTotal"></span>RMB
									</div>
								</div>
								<div class="col-6 col-sm-5">
									<a class="btn btn-success btn-block f_13 font-weight-bold" id="checkOutHref">结算</a>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="col-12 col-lg-4">
					<div class="border rounded bg-white final_payment">
						<div class="card-body  border-bottom">
							<p class="text-muted">5 项</p>
							<p class="font-weight-bolder">展示详情</p>
							<div>
								<span class="font-weight-bold">小计</span>
								<span class="float-right font-weight-bold">$94.00</span>
							</div>
						</div>
						<div class="card-body ">
							<div>
								<span class="font-weight-bold">总计(税后)</span>
								<span class="float-right font-weight-bold">$94.00</span>
							</div>
							<div>
								<span class="font-weight-bold">税</span>
								<span class="float-right font-weight-bold">$9.00</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


	</div>

<th:block th:include="end"/>

	<script src="/js/jquery-3.4.1.min.js"></script>
	<script src="/js/owl.carousel.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/all.min.js"></script>
	<script src="/js/index.js"></script>
	<script src="/js/wow.min.js"></script>



<!--定义在购物车展示商品的模版-->
<script id="cartTemplate" type="text/html">
	{{#  layui.each(d,function(i, cartWaresInfo){ }}
	<div class="row">
		<div class="col-12 col-md-6 pr-0">
			<div class="d-flex">
				<div class=" col-xl-4 col-lg-5 col-md-4 col-4 px-0">
					<a><img src="{{cartWaresInfo.mainPic}}" class="fst-image mx-auto d-block img-fluid"
									 alt="product_13"></a>
				</div>
				<div class=" col-xl-8 col-lg-7 col-md-8 col-8 pr-0">
					<h4 class="product-name font-weight-bold mb-2 mb-sm-3 mb-xl-3 mt-sm-2 mt-md-2"><a
							href="#">{{cartWaresInfo.waresName}}</a></h4>
					<div><span class="font-weight-bolder price">{{cartWaresInfo.price}}</span>RMB
						<del class="text-muted">{{cartWaresInfo.prePrice}}</del>
					</div>
					<div class="my-1 f_13">
						<span>颜色:</span>
						<span>{{cartWaresInfo.memberWaresColor}}</span>
					</div>
					<div class="f_13">
						<span>版本:</span>
						<span>{{cartWaresInfo.memberWaresVersion}}</span>
					</div>
					<div class="f_13">
						<span>特色:</span>
						<span>{{cartWaresInfo.feature}}</span>
					</div>
				</div>
			</div>
		</div>

		<div class="col-12 col-md-6 mt-4">
			<div class="d-flex">
				<div class="col-md-3 col-sm-4 col-5 text-left text-md-right my-2 ">
						<!--小计-->
						<span class="subTotal">{{cartWaresInfo.amount*cartWaresInfo.price}}</span>
				</div>

				<input type="hidden" value="{{cartWaresInfo.price}}">
				<div class="col-md-7 col-sm-4 col-5">
					<input type="hidden" value="{{cartWaresInfo.memberWaresVersion}}">
					<input type="hidden" value="{{cartWaresInfo.memberWaresColor}}">
					<input type="hidden" value="{{cartWaresInfo.id}}">
					<input type="number" name="quant[1]" class="form-control input-number"  min="1"  value="{{cartWaresInfo.amount}}">
				</div>

				<input type="hidden" value="{{cartWaresInfo.cartId}}">
				<div class="col-md-2 col-sm-4 col-2 my-2 mt-1 text-right text-md-left">
					<a class="delHref">
					<i class="fas fa-trash-alt"></i>
					</a>
				</div>
			</div>
		</div>
	</div>
	<hr>
	{{#  }); }}
</script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

	layui.use([ 'form', 'table', 'layer','laytpl'], function() {
		var $ = layui.jquery, form = layui.form, table = layui.table;
		layer = layui.layer;
		var laytpl = layui.laytpl;


		//给购物车按钮绑定事件
		$("body").on("click","#cart",function (){
			//判断一下是否登录
			$.post("/cart/loginOrNO",function (res){
				if(res===1){
					window.top.location.href="/cart/cartPage";//登陆了-跳转购物车
				}else{
					window.top.location.href="/login";//没登录-跳转登录页面
				}

			});
		});

		var currentMemberId='[[${currentMemberId}]]';

		var loadCart=function (){
			//查询当前会员购物车中的商品的信息
			$.post("/cart/cartWaresInfo?currentMemberId="+currentMemberId,function (cartWaresInfo){
				laytpl($("#cartTemplate").html()).render(cartWaresInfo,function (ht){
					$("#models").html(ht);
				});
				//更新总计
				var text=0;
				$.each(cartWaresInfo,function (i,v){
					text+=v.price*v.amount;
				});
				$("#sumTotal").html(text);

				//获得购物车中该会员买的所有商品的购物车id
				var ids=[];
				$.each(cartWaresInfo,function(i,v){
					if (v.memberId==currentMemberId) {
						ids.push(v.cartId);
					}
				});
				//给结算超链接绑定事件
				$("#checkOutHref").on("click",function(){
					//判断购物车中有无商品
					if(cartWaresInfo.length==0){
						layer.msg("您还未选择任何商品!");
					}else{
						//返回确认订单页面
						$.get("/checkout/checkoutPage?ids="+ids,function (){
							window.top.location.href="/checkout/checkoutPage?ids="+ids;
						});
					}
				});

			});
		};

		loadCart();

		$("body").on("click",".delHref",function (){
				$.get("/cart/delCartWares?cartId="+$(this).parent().prev().val(),function() {
					loadCart();
					layer.msg("删除成功!");
				});
		});



			$("body").on("input",".form-control", function(){
				var price=$(this).parent().prev().val();
				var amount=$(this).val();
				var currentWaresId=$(this).prev().val();
				var currentColor=$(this).prev().prev().val();
				var currentVersion=$(this).prev().prev().prev().val();
				$(this).parent().prev().prev().find(".subTotal").html(price*amount);//更新每条商品后面的小计
				loadCart();//更新总计
				//更新数据库中的 当前会员 买的当前商品 的数量
				$.post("/cart/updateAmount?currentMemberId="+currentMemberId+"&&currentWaresId="+currentWaresId+"&&amount="+amount+"&&currentColor="+currentColor+"&&currentVersion="+currentVersion,function (){

				});

			});


	});
</script>

</body>
</html>